<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地域分布</title>
    <link rel="stylesheet" href="../css/all.css" />

    <style>
      .container {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100vh;
        background-image: url("../img/bac1.png");
        background-size: cover;
      }

      li::marker {
        display: none;
      }
      li {
        list-style-type: none;
      }
      .header {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        justify-content: space-around;
        /* background-color: #008c8c; */
      }
      .header-left {
        display: flex;
        width: 80%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        background-image: url("../img/introduce/zuzi.png");
        background-size: 30% 100%;
        background-position: 0%;
        background-repeat: no-repeat;
        padding-left: 30px;
        z-index: 3;
      }
      .logo {
        background-image: url("../img/introduce/logo.png");
        background-size: 198% 360%;
        background-repeat: no-repeat;
        width: 60px;
        height: 55px;
        background-position: 50% 70%;
        cursor: pointer;
        /* background-color: aqua; */
      }
      /* 头部 */
      .title {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 3.3em;
        font-family: font3;
        color: #789a89;
        padding-left: 14px;
        z-index: 1;
      }
      .header-right {
        display: flex;
        width: 18%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 23px;
      }
      .header-right > ul {
        display: flex;
        height: 10%;
        width: 15%;
        list-style-type: none;
      }
      .header-right > ul > li {
        position: relative;
        transition: all 0.5s ease;
        font-family: font3;
        height: auto;
        font-size: 2.3em;
        font-weight: bold;
        padding-left: 24px;
        color: #8f3536;
        cursor: pointer;
      }
      .header-right > ul > li.active {
        color: #83a795;
      }
      .header-right > ul > li > a {
        text-decoration: none; /* 取消下划线 */
        color: inherit; /* 继承父元素的文字颜色 */
        cursor: pointer; /* 鼠标悬停时显示手型 */
      }
      .header-right > ul > li:hover {
        transition: all 0.5s ease;
        color: #83a795;
      }
      .header-right > ul > li:not(:first-child)::after {
        content: "";
        width: 4px;
        height: 50px;
        left: 7px;
        position: absolute;
        top: 15px;
        background-color: #8f3536;
      }
      .main {
        display: flex;
        height: 90%;
        width: 100%;
        flex-direction: column;
        transition: all 0.5s ease;
        justify-content: center;
        align-items: flex-start;
        /* background-color: #789a89; */
        position: relative;
        opacity: 0;
        margin-top: -20px;

        align-items: center;
      }

      /* 轮播 */

      /* 下面地图 */
      .area {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        /* background-color: #8f3536; */
      }
      /* 更改图片的大小 */
      img {
        width: 100%;
        border-radius: 10px;
      }
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 50%;
        /* background-color: #8f3536; */
        margin-bottom: 15px;
      }

      .imgs {
        position: absolute;
        width: 40%;
        height: 95%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
      }
      /* 让图片都叠在一起 */
      .imgs li {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
      }
      .imgs img {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .imgs .innerImg {
        width: 200px;
        height: 100px;
        margin-left: 250px;
        margin-top: 50px;
        box-shadow: 2px 2px 5px rgb(204, 223, 31);
      }
      /* 给左右按钮设计样式，和定位
      .box .left {
        position: absolute;
        font-size: 24px;
        color: white;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: black;
        border-radius: 18px;

        opacity: 0.3;
        top: 50%;
        left: 10px;
        z-index: 999;
      }
      .box .right {
        position: absolute;
        font-size: 24px;
        color: white;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: black;
        border-radius: 18px;
   
        opacity: 0.3;
        top: 50%;
        right: 10px;
        z-index: 999;
      }
 
      .left:hover {
      
        opacity: 0.7;
      }
      .right:hover {
        opacity: 0.7;
      }
        */

      /* 文字介绍上下浮动 */
      .guide {
        /* background-color: #8f3536; */
        width: auto;
        height: auto;
        z-index: 10;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: font3;
        left: 18%;
        transition: all 0.5s ease;
        animation: floatAnimation 2s infinite ease-in-out;
      }
      .guide > p {
        color: #811d21;
        font-size: 2em;
        writing-mode: vertical-rl; /* 从上到下，从右到左 */
        text-orientation: upright; /* 文本方向保持正常 */
        white-space: nowrap; /* 避免文字换行 */
      }

      /* li */
      .imgs > li {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: antiquewhite;
        border: 2px solid #8f3536;
      }
      /* 把图片错开 */
      .imgs .one {
        transform: translateX(-150px) scale(0.9);
        opacity: 0.8;
        z-index: 1;
      }
      /* 第二张图片在中间，层级最高 */
      .imgs .two {
        z-index: 2;
        transform: scale(1.15);
        opacity: 1;
      }

      .imgs .three {
        transform: translateX(150px) scale(0.9);
        opacity: 0.8;
        z-index: 1;
      }
      .mainText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96%;
        position: relative;
        height: 95%;
        background-image: url(../img/introduce/bac2.jpg);
        background-size: 133% 137%;
        border: 2px solid #8f3536;
        background-repeat: no-repeat;
        background-position: center;
        padding: 10px;
        font-family: font3;
      }
      .area-text {
        display: flex;
        justify-content: flex-start;
        font-size: 1.9em;
        width: 90%;
        height: 90%;
        /* background-color: #8f3536; */
      }
      .area-text > span {
        width: 100%;
        height: 100%;
        overflow: auto;
        text-indent: 1em; /* 设置首行缩进为2个字符的宽度 */
        padding: 10px;
      }
      .area-text > span > p {
        display: inline-block;
        color: #8f3536;
      }
      .area-text > span::-webkit-scrollbar {
        display: none;
      }

      /* 每个地区的图标 */

      .arealogo {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 15%;
        bottom: 3%;
        right: 1%;
        /* background-color: #8f3536; */
      }
      .arealogo > img {
        width: 50px;
        height: 85px;
        transform: translateX(10%) translateY(-8%);
      }

      /* 刚开始不显示的图片就放在中间图片的下面 */

      .twoInnerWords {
        position: absolute;
        top: 130px;
        left: 50%;
        margin-left: -60px;
        font-size: 20px;
        color: black;
      }
      .imgInnerWords {
        position: absolute;
        width: 500px;
        height: 80px;
        margin-left: 90px;
        margin-top: 60px;
        padding-top: 10px;
        border: 2px solid #888;
        background-color: rgba(241, 218, 148, 0.315);
        color: black;
      }
      .topWords {
        line-height: 30px;
        width: 90px;
        margin-left: 200px;
        background-color: rgba(233, 226, 127, 0.575);
        text-align: center;
      }
      .bottomWords {
        line-height: 30px;
        margin: 5px 0 0 130px;
      }

      /* 左右两边各一个盒子 */
      .rights {
        position: absolute;
        right: 20%;
        bottom: 0;
        height: 100%;
        /* background-color: #8f3536; */
        width: 100px;
      }
      .lefts {
        position: absolute;
        left: 20%;
        bottom: 0;
        height: 100%;
        width: 100px;
        /* background-color: #8f3536; */
      }

      /* 结束 */

      .area {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 49%;
        width: 80%;
      }
      .area-main {
        display: flex;
        width: 90%;
        height: 100%;
        position: relative;
        /* background-color: #83a795; */
        justify-content: space-around;
        align-items: center;
        margin-left: 30px;
      }
      .area-img {
        width: 68%;
        height: 100%;
        display: flex;
        position: relative;
      }
      .area-img > img {
        width: 100%;
        height: 100%;
        transform: translateX(10%);
        box-shadow: none;
      }

      /* 地图热点上下浮动  */
      .shadow {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
      }
      .shadow > img {
        transition: all 0.5s ease;
        animation: floatAnimation 2s infinite ease-in-out;
      }
      @keyframes floatAnimation {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
        100% {
          transform: translateY(0);
        }
      }
      .shadow1 {
        display: flex;
        position: absolute;
        width: 20%;
        height: 23%;
        /* background-color: #789a89; */
        background-image: url(../img/area/shadow1.png);
        background-size: 60% 100%;
        background-repeat: no-repeat;
        background-position: 50% 10%;
        right: -2.5%;
        top: 29%;
        font-family: font3;
        color: #8f3536;
        font-size: 1.7em;
        font-weight: 600;
      }
      .shadow1 > img {
        box-shadow: none;
        width: 29px;
        transform: translate(75%, 20%);
      }
      .shadow1 > span {
        transform: translate(8%, 50%);
      }
      .shadow2 {
        display: flex;
        position: absolute;
        width: 24%;
        height: 25%;
        /* background-color: #789a89; */
        background-image: url(../img/area/shadow2.png);
        background-size: 60% 100%;
        background-repeat: no-repeat;
        background-position: 50% 10%;
        right: 36%;
        top: 30%;
        font-family: font3;
        color: #8f3536;
        font-size: 1.7em;
        font-weight: 600;
      }
      .shadow2 > img {
        box-shadow: none;
        width: 29px;
        transform: translate(120%, -20%);
      }
      .shadow2 > span {
        transform: translate(0%, 55%);
      }
      .shadow3 {
        display: flex;
        justify-content: center;
        position: absolute;
        width: 61.5%;
        height: 51%;
        /* background-color: #789a89; */
        background-image: url(../img/area/shadow3.png);
        background-size: 60% 100%;
        background-repeat: no-repeat;
        background-position: 50% 10%;
        font-family: font3;
        color: #8f3536;
        font-size: 1.7em;
        font-weight: 600;
        right: 0%;
        transform: translateX(34.4%);
        top: 46.7%;
      }
      .shadow3 > img {
        box-shadow: none;
        width: 29px;
        transform: translate(270%, -2%);
      }
      .shadow3 > span {
        transform: translate(-10%, 55%);
      }
      .shadow1.closeShadow,
      .shadow2.closeShadow,
      .shadow3.closeShadow {
        background-image: none;
      }
      .echart {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 55%;
        /* background-color: #8f3536; */
      }

      /* 人物 */
      .people {
        position: absolute;
        display: flex;
        background-image: url(../img/people/精灵-0.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20%;
        height: 50%;
        max-width: 391px;
        max-height: 350px;
        bottom: 2%;
        left: 2%;
        opacity: 0.6;
        transition: all 0.5s ease;
      }
      .people.active {
        opacity: 0.6;
      }
      /* 竹子 */
      .zuzi {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 73% 100%;
        transform: rotate(10deg) translateX(10%);
        z-index: 3;
      }
      .zuzi2 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 210% 120%;
        background-position: 95% 100%;
        transform: rotate(-24deg);
        z-index: 3;
      }
      .zuzi3 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 85% 100%;
        transform: rotate(0deg);
        z-index: 3;
      }
      /* 切换按钮 */
      .lef-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        left: 0;
        transform: rotate(50deg) translateX(-60%);
        top: 33%;
        cursor: pointer;
        transition: all 0.5s ease;
        opacity: 0.6;
      }
      .lef-btn:hover {
        opacity: 1;
      }
      .lef-btn > img {
        width: 100%;
      }
      .right-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        right: 0;
        transform: rotate(-65deg) translateY(40%);
        z-index: 10;
        top: 38%;
        cursor: pointer;
        transition: all 0.5s ease;
        opacity: 0.6;
      }
      .right-btn:hover {
        opacity: 1;
      }
      .right-btn > img {
        width: 100%;
      }
      /* 鼠标跟随 */
      #follower {
        position: absolute;
        z-index: 999;
        transition: transform 0.1s ease;
        width: 20px;
        height: 20px;

        background-color: rgba(212, 38, 38, 0.4);
        position: absolute;
        border-radius: 50%; /* 将方形 div 变成圆形 */
        pointer-events: none;
      }
      /* 地图 */
      .map {
        position: absolute;
        width: auto;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        font-family: font3;
        color: #cc7f81;
        /* background-color: #811d21; */
      }

      /* 悬浮 detial  */
      .detail {
        position: relative;
        margin-left: -8px;
        text-indent: 0;
        width: 1px;
        cursor: pointer;
        color: #7e2224;
        transition: all 0.5s ease;
        opacity: 1;
      }
      .detail:hover {
        background-color: #ece2d5;

        color: #7e2224;
      }

      .detail::after {
        opacity: 0;
        transition: all 0.5s ease;
      }

      .detail:hover::after {
        opacity: 1;
        width: 300px;
        position: absolute;
        line-height: 1.1em;
        top: 0;
        left: 60%;
        transform: translateY(-100%);
        font-size: 0.6em;
        background-color: #ece2d5;
        border: 2px solid #7e2224;
        content: "绫绢是真丝织物的两个品种名称,“花者为绫，素者为绢”";
        z-index: 20;
      }
      .detail2:hover::after {
        opacity: 1;
        width: 300px;
        position: absolute;
        line-height: 1.1em;
        top: 100%;
        left: 0;
        padding: 2px;
        transform: translateY(8%) translateX(-80%);
        font-size: 0.6em;
        background-color: #ece2d5;
        border: 2px solid #7e2224;
        content: "缂丝[kè sī]，又称“刻丝”，中国传统丝绸艺术品，一种挑经显纬，极具欣赏装饰性丝织品";
      }
      .detail3:hover::after {
        opacity: 1;
        width: 300px;
        position: absolute;
        line-height: 1.1em;
        top: 100%;
        left: 50%;
        padding: 2px;
        transform: translateY(5%) translateX(-30%);
        font-size: 0.6em;
        background-color: #ece2d5;
        border: 2px solid #7e2224;
        content: "剖丝[pōu sī],将1厘米不到的竹子均匀剖成几十根细竹丝";
      }
      .detail4:hover::after {
        opacity: 1;
        width: 350px;
        position: absolute;
        line-height: 1.1em;
        top: 60%;
        left: 0;
        padding: 2px;
        transform: translateY(5%) translateX(-50%);
        font-size: 0.6em;
        background-color: #ece2d5;
        border: 2px solid #7e2224;
        content: "缂丝织造技法，画稿绘于经线，后用各色彩纬小梭，依纹样色彩，一块一块回纬缂织其纹，两花之间经线相通，色纬不相通不贯穿整个幅面。有时花纹之间遇到垂直线的边缘时，就会出现一条裂缝。这种技法亦称“通经回纬“";
      }
      .area-text2 > span {
        overflow: visible;
      }
      /* 按钮 */
      .right-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
      .right-arr {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        position: absolute;
        z-index: 10;
        left: 7%;
        opacity: 0;
        top: 9%;
        transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
        cursor: pointer;
        transition: all 0.5s ease;
      }
      .left-btn {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        top: 10%;
        transform: scaleX(100%) scaleY(70%);
        position: absolute;
        cursor: pointer;
        opacity: 0;
        transition: all 0.5s ease;
      }
      .lef-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"></div>
          <div class="title">
            <span>团扇分布</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li class="active"><a href="./introduce.html">初识</a></li>
            <li><a href="./history.html">远溯</a></li>
            <li><a href="./kind.html">览境</a></li>
            <li><a href="./structure.html">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="box">
          <!-- 大盒子 -->
          <!-- 左侧按钮 -->
          <!-- <a href="javascript:;" class="left">&lt</a> -->
          <!-- 右侧按钮 -->
          <!-- <a href="javascript:;" class="right">&gt</a> -->
          <div class="guide"><p>点击产地了解更多</p></div>
          <!-- 轮播图片 -->
          <ul class="imgs">
            <li class="one">
              <div class="mainText">
                <div class="area-text">
                  <span
                    ><p>桂林</p>
                    圆竹
                    <span class="detail detail3"> 剖丝</span
                    >团扇。团扇的主要制作工艺是将浸泡后的竹子剖成数十根均匀的竹丝编成扇骨,以宣纸
                    、棉布 、丝绸等贴制扇面，最后经过剪裁
                    包边等工序制作成剖丝团扇 。</span
                  >
                </div>
                <div class="arealogo">
                  <img src="../img/area/arlogo3.png" alt="" />
                </div>
              </div>
            </li>
            <li class="two">
              <div class="mainText">
                <div class="area-text area-text2">
                  <span
                    ><p>浙江</p>
                    浙江
                    <span class="detail detail1">绫绢</span
                    >扇。用细洁的纱、罗、绫等制成的一种扇子。多为圆形
                    ，造型美画面精。用铁丝作外框 ,用绢糊面 ,彩带沿边
                    ,以绘画刺绣、缂丝、抽纱、烫花、通草贴花等作 扇面装饰 。
                  </span>
                </div>
                <div class="arealogo">
                  <img src="../img/area/arlogo1.png" alt="" />
                </div>
              </div>
            </li>
            <li class="three">
              <div class="mainText">
                <div class="area-text">
                  <span
                    ><p>苏州</p>
                    缂丝工艺团扇。<span class="detail detail2"> 缂丝</span
                    >织造技艺主要是使用古老的木机及若干竹制的梭子和拨子
                    ,经过<span class="detail detail4">“通经断纬”</span>
                    ,将五彩的蚕丝线缂织成一幅色彩丰富 、色阶齐备的织物
                    。这种织物具有图案花纹不分正反面的特色 。在图案轮廓
                    、色阶变换等处 ，织物表面像用小刀划刻过一样
                    ，呈现出小空或断痕 ,“承空观之,如雕镂之象”
                    ,因此得名“缂（刻）丝 ,缂丝工艺团扇的扇面就是通过此技术完成的
                  </span>
                </div>
                <div class="arealogo">
                  <img src="../img/area/arlogo2.png" alt="" />
                </div>
              </div>
            </li>
          </ul>
          <div class="rights"></div>
          <div class="lefts"></div>
        </div>
        <div class="area">
          <div class="area-main">
            <div class="area-img">
              <img src="../img/area/area1.png" alt="" />
              <div
                class="shadow shadow1 closeShadow"
                onmouseover="openShadow(1)"
                onmouseout="openShadow(1)"
                onclick="changeBanner(2)"
              >
                <img src="../img/area/hot.svg" alt="" /><span>苏州</span>
              </div>
              <div
                class="shadow shadow2 closeShadow"
                onmouseover="openShadow(2)"
                onmouseout="openShadow(2)"
                onclick="changeBanner(0)"
              >
                <img src="../img/area/hot.svg" alt="" /><span>桂林</span>
              </div>
              <div
                class="shadow shadow3 closeShadow"
                onmouseover="openShadow(3)"
                onmouseout="openShadow(3)"
                onclick="changeBanner(1)"
              >
                <img src="../img/area/hot.svg" alt="" /><span>浙江</span>
              </div>
              <div class="map">
                <span>审图号: GS京(2022)1061号</span>
                <span>高德地图 ©2022 高德软件</span>
              </div>
            </div>
          </div>
          <div class="echart"></div>
        </div>
        <!-- people -->
        <div class="people active"></div>
        <!-- 这里吧右下角的竹子去了 -->
        <div class="zuzi"></div>
        <div class="zuzi2"></div>
        <div class="zuzi3"></div>
        <div class="lef-btn">
          <img src="../img/last-btn.png" alt="" />
          <img class="left-btn" src="../img/left-btn.svg" alt="" />
        </div>
        <div class="right-btn">
          <img src="../img/next-6-btn.png" alt="" />
          <img class="right-arr" src="../img/left-btn.svg" alt="" />
        </div>
        <audio id="audio" loop>
          <source src="../audio/bacmusic3.MP3" />
        </audio>
        <audio id="language">
          <source src="../audio/area.mp3" />
        </audio>
      </div>
    </div>
  </body>
</html>
<script src="../js/echarts.common.js"></script>
<script>
  (() => {
    window.onload = () => {
      initEcharts();
      people();
      btn();
      initFollow();
      initBody();
      initRoute();

      player();
      loclaMusic();
    };
  })();

  // 播放
  // 保存播放状态
  function loclaMusic() {
    // 从本地存储中获取保存的播放状态
    const savedPlaybackState = localStorage.getItem("playbackState");

    // 如果有保存的播放状态
    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      // 设置音频的播放位置
      audio.currentTime = playbackState.currentTime;

      // 如果播放状态为播放中，则继续播放音频
      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;

    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();
    });

    // 结束 给人透明

    // 当音频播放或暂停时，保存播放状态到本地存储
    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    // 当音频播放位置发生变化时，实时更新播放状态到本地存储
    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  //   轮播图
  //获取元素
  //   let leftb = document.querySelector(".left");
  let rightb = document.querySelector(".right");
  let box = document.querySelector(".box");
  let imgs = box.querySelector(".imgs");
  let imgt = imgs.querySelectorAll("li");
 

  //翻页模块
  let num = ["one", "two", "three"];
  //右翻页
  //   rightb.addEventListener("click", rightf);

  function rightf() {
    //把数组的最后一个添加到第一个
    num.unshift(num[2]);
    //删除最后一个
    num.pop();
    //重新给li添加类名
    for (let i = 0; i < num.length; i++) {
      imgt[i].setAttribute("class", num[i]);
    }
  }
  // 区域点击切换banner

  function changeBanner(index) {
    let currentIndex = index;
 
 
    if (num[currentIndex] !== "two") {
      rightf();
  
      changeBanner(currentIndex);
    }
  }
  //左翻页
 
  function leftf() {
    num.push(num[0]);
    num.shift();
    for (let i = 0; i < num.length; i++) {
      imgt[i].setAttribute("class", num[i]);
    }
  }
  //点击图片实现翻页 
  let rights = document.querySelector(".rights");
  rights.addEventListener("click", function () {
    rightf();
  });
  let lefts = document.querySelector(".lefts");
  lefts.addEventListener("click", function () {
    leftf();
  });

  //  结束

  //   echarts
  function initEcharts() {
    let echartDom = document.querySelector(".echart");
    let myChart = echarts.init(echartDom);
    let option;
    option = {
      title: {
        text: "地区制扇非遗传承人",
        textStyle: {
          fontFamily: "font3",
          fontSize: 30,
          color: "#814243",
        },
        left: 150,
        bottom: 10,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "15%",
        right: "4%",
        bottom: "17%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 25, //更改坐标轴文字大小
          },
          axisLine: {
            lineStyle: {
              color: "#9d2933", //更改坐标轴颜色
            },
          },
        },
      },
      yAxis: {
        type: "category",
        data: ["浙江", "苏州", "桂林"],
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 30, //更改坐标轴文字大小
            color: "#814243",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#315070", //更改坐标轴颜色
          },
        },
      },
      series: [
        {
          name: "2006",
          type: "bar",
          color: "#b5c9ac",
          data: [6, 3, 2],
        },
        {
          name: "2021",
          type: "bar",
          color: "#b67b79",
          data: [9, 5, 4],
        },
      ],
      textStyle: {
        fontFamily: "font3",
        fontSize: 30,
      },
    };

    myChart.setOption(option);
  }

  // 人
  function people() {
    // 眨眼
    const people = document.querySelector(".people");
    let blank_index = 0;
 
    timeout = 4000;
    let blink = () => {
      if (blank_index == 2) {
        blank_index = 0;
        timeout = 4000;
      } else {
        blank_index += 1;
        timeout = 40;
      }
      people.style.backgroundImage = `url(../img/people/精灵-${blank_index}.png)`;
      setTimeout(() => {
        blink();
      }, timeout);
    };
    blink();
  }

  // 按钮
  function btn() {
    const leftBtn = document.querySelector(".lef-btn");
   
    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "./introduce.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "./means.html";
    });
  }

  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  // 整体隐藏
  function initBody() {
    const main = document.querySelector(".main");
    setTimeout(() => {
      main.style.opacity = "1";
    }, 5);
  }

  // 动态显示隐藏阴影部分
  function openShadow(id) {
    let clickArea = document.querySelector(`.shadow${id}`);
    clickArea.classList.toggle("closeShadow");
    let otherAreas = document.querySelectorAll(`.shadow:not(.shadow${id})`);
    otherAreas.forEach((area) => {
      area.classList.add("closeShadow");
    });
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 0) {
        li.addEventListener("mouseover", () => {
          lis[0].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[0].classList.add("active");
        });
      }
    });
  }

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 1000);
  }
</script>
